<template>
  <div>
    <div class="check-result">
      <img src="@/assets/images/result-icon.png" alt="" />
      基本信息查询
    </div>
    <!-- 引入公共组件 BaseInfo -->
    <Base-Info
      :markStatus="false"
      :customer="customer"
      @getPatientList="getPatientList"
    ></Base-Info>

    <div class="check-result-btns patient">
      <div class="btn-bg btn" @click="getPatientList()">查询</div>
      <div class="btn-back btn" @click="reset">重置</div>
    </div>

   
    <div class="patient-people">
      <!-- 引入公共组件 PatientItem -->
      <!-- 表格 -->
    
      <!-- <div
        class="patient-people-items scroll-style"
        @scroll="boxScroll($event)"
      >
        <Patient-Item
          class="patient-Item"
          @getPatientList="getPatientList"
          :patientData="item"
          :childType="item.sex"
          v-for="(item, index) in patientList"
          :key="index"
        ></Patient-Item>
      </div> -->
      <!-- <ul class="enums">
        <li
          class="enums.item"
          :class="letterChoose == item ? 'active' : ''"
          v-for="item in letters"
          :key="item"
          @click="chooseActive(item)"
        >
          {{ item }}
        </li>
      </ul> -->
    </div>
    <div>
      <TabPatient
       :patientList='patientList'
       @getPatientList="getPatientList"
       @sortPatient='sortPatient'
       />
        <SkeletonPagination
     :currentPage="customer.pageNum"
     :max="customer.pageSize"
     :total="total"
     :pageSizeList='[5, 10, 15]'
     @paginationInfo='paginationInfo'
     />
    </div>
  </div>
</template>

<script>
import BaseInfo from "@/views/dashboard/BaseInfo";
import TabPatient from "@/views/dashboard/patientmanagement/tabPatient";
// import PatientItem from "@/views/dashboard/patientmanagement/PatientItem";
import { getPatientList, getFirstLetter } from "@/api/customer";
import SkeletonPagination from '../../../components/skeleton-pagination.vue'
export default {
  name: "PATIENTMANAGENMENT",
  components: {
    BaseInfo,
    TabPatient,
    // PatientItem,
    SkeletonPagination
  },
  data() {
    return {
      letterStatus: false,
      letterChoose: "",
      letters: [], //患者筛选字母
      patientList: [], //患者列表
      customer: {
        //患者档案存档
        pageNum: 1,
        pageSize: 10,
        realName: "",
        code: "",
        sex: "",
        age: "",
        address: "",
        familyHistory: "",
        checkTime: "",
        orderByColumn: 'checkTime',
        isAsc: 'desc' // desc/asc
      },
      total: 0, //总条数
      deleteStatus: false, //删除的状态
    };
  },

  created() {
    // this.checkDivScroolTop();
    this.getPatientList();
    this.getFirstLetter();
  },

  methods: {
    /**
     * 选择的分类
     */
    chooseActive(letter) {
      this.letterChoose = letter;
      this.customer.firstLetter = letter;
      this.customer.pageNum = 1;

      this.getPatientList();
    },

    /**
     * 获取已有患者姓名首字母
     */
    async getFirstLetter() {
      const res = await getFirstLetter();
      // console.log("获取已有患者姓名首字母", res);
      if (res.code != 200) return;
      this.letters = res.list;
    },
  sortPatient () {
   this.customer.isAsc = this.customer.isAsc === 'desc' ? 'asc' : 'desc'
    this.getPatientList()
  },
    /**
     * 患者管理列表
     */
    async getPatientList(status = false, deleteStatus = false) {
      if (deleteStatus) {
        this.customer.pageNum = 1;
      }
      this.deleteStatus = true;
      const res = await getPatientList({
        ...this.customer,
        sex:
          this.customer.sex == ""
            ? this.customer.sex
            : this.customer.sex == "男"
            ? 0
            : 1,
      });
      // console.log("患者管理列表", res);

      if (res.code != 200) return;

      if (status) {
        this.patientList = [...this.patientList, ...res.rows];
      } else {
        this.patientList = [...res.rows];
      }
      this.total = res.total;
    },
paginationInfo (item) {
  const {page, max} = item
  this.customer.pageNum = page
  this.customer.pageSize = max
  this.getPatientList()
},
    /**
     * 修改指标列表数据
     */
    editCustomer(customer) {
      // console.log('存储数据', customer);

      this.customer = {
        ...customer,
      };
      // console.log('存储数据', this.customer);
    },

    /**
     * 重置
     */
    reset() {
      this.customer = {
        pageNum: 1,
        pageSize: 10,
        realName: "",
        code: "",
        sex: "",
        age: "",
        address: "",
        familyHistory: "",
        checkTime: "",
        orderByColumn: 'checkTime',
        isAsc: 'asc' // desc/asc
      };
      this.letterChoose = "";
      this.getPatientList();
    },

    /**
     * 获取患者数据  加载更多
     */
    boxScroll(e) {
      if (e.target.scrollTop + e.target.clientHeight == e.target.scrollHeight) {
        console.log("患者页面触底了");
        if (this.patientList.length >= this.total) return;
        if (this.deleteStatus) {
          this.deleteStatus = false;
          return;
        }
        this.customer.pageNum++;
        this.getPatientList(true);
        this.getFirstLetter();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.patient {
  padding-bottom: 5px;
}

.patient-people {
  display: flex;
  margin-top: 20px;
  // padding-right: 60px;
  position: relative;

  .patient-people-items {
    height: 500px;
    flex-grow: 1;
    box-sizing: border-box;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .enums {
    list-style-type: none;
    margin-right: 10px;
    height: 450px;
    width: 60px;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 1.5%;
    right: 1%;
    z-index: 5;
    flex-wrap: wrap;

    li {
      width: 28px;
      height: 28px;
      font-size: 16px;
      border-radius: 50%;
      text-align: center;
      margin: 3px 0;
      line-height: 28px;
      background-color: transparent;
      color: #666666;

      &:hover {
        font-size: 18px;
        background-color: #8775ff;
        color: #fff;
        transition: all 0.5 ease;
      }
    }

    .active {
      font-size: 18px !important;
      background-color: #8775ff !important;
      color: #fff !important;
    }
  }
}
</style>
